<template>
	<view class="container">
		<view class="content">
			<view class="address_from">
				<view :class="['address_from_item' , pays.fromInfo.userName ? 'address_from_item_column' : '']">
					<view :class="['item_box' , pays.fromInfo.userName ? 'flex_column' : '']">
						<view class="item_label">
							<text>*</text>
							姓名
						</view>
						<view class="item_value">
							<input type="text" v-model="pays.fromInfo.userName" maxlength="20" @blur="userNameBlur"
								@confirm="userNameConfirm" />
						</view>
					</view>

				</view>
				<view :class="['address_from_item' , pays.fromInfo.userMobile ? 'address_from_item_column' : '']">
					<view :class="['item_box' , pays.fromInfo.userMobile ? 'flex_column' : '']">
						<view class="item_label">
							<text>*</text>
							手机号
						</view>
						<view class="item_value">
							<input type="number" maxlength="11" v-model="pays.fromInfo.userMobile"
								@blur="userMobileBlur" @confirm="userMobileConfirm" />
						</view>
					</view>

				</view>
				<view :class="['address_from_item' , addressTemporary ? 'address_from_item_column' : '']">
					<view :class="['item_box' , addressTemporary  ? 'flex_column' : '']">
						<view class="item_label">
							<text>*</text>
							地址
						</view>
						<view class="item_value" @tap="openMap">
							<text
								:class="['address_text' , addressTemporary ?'from_item_text_act' : '']">{{addressTemporary ? addressTemporary : '请选择地址'}}</text>
							<image class="address_icon" :src="url + 'icon-92.png'" mode=""></image>
						</view>
					</view>

				</view>
				<view :class="['address_from_item' , pays.fromInfo.address ? 'address_from_item_column' : '']">
					<view :class="['item_box item_box_textarea' , pays.fromInfo.address ? 'flex_column' : '']">
						<view class="item_label">
							<!-- <text>*</text> -->
							<view class="">详细地址</view>
							<textarea type="text" placeholder="无需重复省市区等，填写如楼栋、门牌号，请勿填写小区等地址信息"
								placeholder-style="color: #CACCCC" v-model="pays.fromInfo.address" @blur="addressBlur"
								@confirm="addressConfirm" />
						</view>
						<view class="item_value">

						</view>
					</view>

				</view>
				<view class="from_btn">
					<template>
						<image @tap="isDefault" :src="pays.fromInfo.isDefault ? `${iconUrl}13.png` : `${iconUrl}12.png`"
							mode=""></image>
						设为默认地址
					</template>


				</view>
				<!-- <view class="from_ai_text">
					<view class="from_ai_text_title">智能填写</view>
					<view class="from_ai_text_content address_from_item">
						<textarea class="textarea_add" type='text' v-model="pays.fromInfo.readAddress"
							placeholder="粘贴地址信息到此处，点击“识别”自动识别姓名、电话和地址如： 润生云养，12345678910，湖北省武汉市洪山区XX大厦"
							placeholder-style="font-size: 30rpx;color:#7C807F"></textarea>
					</view>
				</view> -->

			</view>
		</view>
		<view class="foot">
			<view class="foot_btn_box">
				<view class="xjs-btn-primary" @click="submitBtn">保存</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue';
	import api from '@/api'
	import config from '@/config'
	const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')  //图片前缀
	const addressTemporary = ref('')
	interface fromInfoItem {
		userName : string,
		userMobile : string | number,
		address : string,
		province : string,
		city : string,
		area : string,
		isDefault : string | number,
		locationAddress : string,
		location : string | number
	}
	const isBtn = ref(true)
	const region = ref([])//选择的地址 省市区
	const location = ref([])
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const pays = reactive<{
		query : Partial<{
			id : string | number
		}>
		fromInfo : Partial<fromInfoItem>
	}>({
		query: {},
		fromInfo: {
			isDefault: 0
		}
	})
	onLoad((options) => {
		if (options.id) {
			pays.query.id = options.id
			uni.setNavigationBarTitle({
				title: '修改地址'
			});
			getAddressInfo(pays.query.id)
		}

	})
	onShow(() => {
		uni.$once('commitCheck', (data) => {
			//addressObject.value = data
			addressTemporary.value = data.province + data.city + data.district + data.name + data.address
			pays.fromInfo.location = data.location
			pays.fromInfo.province = data.province
			console.log(data.province, 'data.province')
			pays.fromInfo.city = data.city
			console.log(data.city, 'data.city')
			pays.fromInfo.area = data.district
			console.log(data.district, 'data.district')
			pays.fromInfo.locationAddress = data.name + data.address

		});
	})
	const openMap = () => {
		uni.navigateTo({
			url: '/pages/map/index/index'
		})
	}
	const getAddressInfo = async (id : any) => {

		const res : any = await api({
			method: 'get',
			url: `/mall/users-addr/${id}`
		})

		if (res) {
			console.log(res.data)
			pays.fromInfo.userName = res.data.name
			pays.fromInfo.userMobile = res.data.mobile
			pays.fromInfo.address = res.data.address
			pays.fromInfo.province = res.data.province
			pays.fromInfo.isDefault = res.data.isDefault
			addressTemporary.value = res.data.province + res.data.city + res.data.area + res.data.locationAddress
			pays.fromInfo.locationAddress = res.data.locationAddress
			//pays.userInfo = res.data
			//let str = region.value.join('') + pays.fromInfo.address
			//await getLocation(str)
		}
	}
	const userNameBlur = ({ detail: { value } } : any) => {
		pays.fromInfo.userName = value
	}
	const userNameConfirm = ({ detail: { value } } : any) => {
		pays.fromInfo.userName = value
	}
	const userMobileBlur = ({ detail: { value } } : any) => {
		pays.fromInfo.userMobile = value
	}
	const userMobileConfirm = ({ detail: { value } } : any) => {
		pays.fromInfo.userMobile = value
	}
	const addressBlur = ({ detail: { value } } : any) => {
		pays.fromInfo.address = value
	}
	const addressConfirm = ({ detail: { value } } : any) => {
		pays.fromInfo.address = value
	}
	const isDefault = () => {
		pays.fromInfo.isDefault = pays.fromInfo.isDefault ? 0 : 1
	}
	const submitBtn = async () => {

		if (!pays.fromInfo.userName) {
			return toastfnc('请填写收件人姓名!')
		}
		if (!pays.fromInfo.userMobile) {
			return toastfnc('请填写收件人手机号!')
		}
		let mobileReg = /^1[3456789]\d{9}$/
		if (!mobileReg.test(pays.fromInfo.userMobile + '')) {
			uni.showToast({
				title: '手机号格式有误',
				icon: 'none'
			});
			return false
		}
		if (pays.fromInfo.locationAddress.trim().length == 0) {
			return toastfnc('请选择地址!')
		}
		if (isBtn.value) {
			isBtn.value = false
			const res : any = await api({
				method: 'POST',
				url: `/mall/users-addr/saveOrUpdateAddress`,
				data: {
					name: pays.fromInfo.userName,
					mobile: pays.fromInfo.userMobile,
					province: pays.fromInfo.province,
					city: pays.fromInfo.city,
					area: pays.fromInfo.area,
					address: pays.fromInfo.address,
					isDefault: pays.fromInfo.isDefault,
					id: pays.query.id,
					latitudeLongitude: pays.fromInfo.location,
					locationAddress: pays.fromInfo.locationAddress
				}
			})
			if (res.code == 0) {
				if (pays.query.id) {
					toastfnc('修改成功!')
				} else {
					toastfnc('添加成功!')
				}
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
			else {
				isBtn.value = true
			}
		}

	}
	/* const getLocation = (address) => {
		return new Promise((resolve, reject) => {
			uni.request({
				url: config.mapUrl, //腾讯官方逆解析接口，可直接复制
				data: {
					address,
					key: config.mapKey, //自己申请的Key
					output: "jsonp",
				},
				method: "GET",
				success(json : any,) {
					console.log(1452, json)
					if (json.statusCode == 200) {
						if (json.data.infocode == '30001') {
							uni.showToast({
								title: '详细地址填写有误',
								icon: 'none'
							});
							reject();
							return
						} else {
							location.value = json.data.geocodes[0].location
						}

						resolve(json);
					} else {
						uni.showToast({
							title: '获取该位置经纬度失败,请重试',
							icon: 'none'
						});
						reject();
					}
				},
				fail: (res) => {
					console.log(145255)
					reject();
				},
			});
		});
	} */
	const toastfnc = (tipsText : string) => {
		uni.showToast({
			title: tipsText,
			icon: 'none'
		})

	}
	/* const goSetPet = () => {
		uni.navigateTo({
			url: '/pages/petList/setPet/setPet'
		})
	} */
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F9F6F6;
	}

	.content {
		padding-top: 40rpx;

		.address_from {

			.address_from_item {
				padding: 32rpx;
				margin: 0 auto;
				margin-bottom: 40rpx;
				width: 686rpx;
				box-sizing: border-box;
				border: 2rpx solid #E4E6E6;
				border-radius: 16rpx;
				background-color: #fff;



				.item_box {
					display: flex;
					line-height: 1;
					align-items: center;

					.item_label {
						margin-right: 16rpx;
						font-size: 30rpx;
						color: #7C807F;

						text {
							color: #FF6084;
						}

						textarea {
							padding: 0 !important;
							margin: 0 !important;
							color: #1B2120;
						}
					}

					.item_value {
						flex: 1;
						display: flex;
						align-items: center;
						font-size: 30rpx;

						input {
							width: 100%
						}

						textarea {
							width: 100%
						}

						.picker {
							flex: 1;
							color: #1B2120;
							font-size: 30rpx;
						}

						.address_text {
							width: 100%;
							color: #CACCCC;
						}

						.from_item_text_act {
							color: #1B2120;
						}

						.address_icon {
							width: 32rpx;
							height: 32rpx;
						}

					}
				}

				.item_box_textarea {
					align-items: normal;
				}

				.flex_column {
					flex-direction: column;
					align-items: normal;
				}
			}

			.address_from_item_column {
				padding: 16rpx 32rpx;
			}

			.from_btn {
				display: flex;
				align-items: center;
				width: 686rpx;
				margin: 0 auto;
				margin-bottom: 80rpx;
				font-size: 28rpx;
				color: #1B2120;

				image {
					margin-right: 16rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.from_ai_text {
				width: 686rpx;
				margin: 0 auto;

				.from_ai_text_title {
					margin-bottom: 40rpx;
					font-size: 28rpx;
					color: #1B2120;
				}

				.from_ai_text_content {
					.textarea_add {
						font-size: 30rpx;
						width: 100%;
					}
				}
			}
		}
	}

	.foot {
		line-height: 1;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-top: 8rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		display: flex;
		justify-content: center;

		.foot_btn_box {
			display: flex;
			justify-content: center;
			width: 686rpx;
		}
	}
</style>